<template>
    <div class="bg" style="height:calc(100vh - 60px)">
        <XHeader
            :left-options="{backText:''}"
            style="background-color: #55BEC1;"
            class="tabbar"
         >精品频道
           <router-link to="/" class="fa fa-home ri" sort="right"></router-link>
        </XHeader>
        <p style="margin:47px 0 0 0"></p>

        <div v-for="(b,i) in boutique">
            <router-link :to="'/details/'+b._id">
                <div class="view">
                    <p>{{b.name}}</p>
                    <img :src="'/api/images/boutique/'+b.avatar">
                </div>
            </router-link>
        </div>
        <div style="height:60px;background-color:#55BEC1;line-height:60px;font-size:15px;position:fixed;bottom:0;width:100%">
            <span style="color:white">联系在线客服请关注公众号：</span>
            <span style="color:red">书海小说网</span>
        </div>
    </div>
</template>

<script>
    import { XHeader } from 'vux'
    export default{
        components:{
            XHeader
        },
        data:function(){
            return {
                boutique:[]
            } 
        },
        mounted:function(){
            this.http.get("/api/getbou").then(res=>{
                if(!res.data.err){
                    this.boutique = res.data.data;
                }
            })
        }
    }
</script>

<style scoped>
    .tabbar{
        position: fixed;
        top: 0;
        z-index: 5;
        width: 100%;
    }
    .ri{
        position: absolute;
        right: 8px;
        font-size: 30px;
        top: 8px;
        color: white;
    }
    .view{
        color: #444;;
        text-align: left;
        width: 90%;
        background-color: white;
        padding: 0 16px;
        position: relative;
        margin: 10px auto;
    }
    .view p{
        margin: 0;
        padding: 16px 0;
    }
    .view p::after{
        content: ">";
        position: absolute;
        right: 6px;
        color: #888;
        font-size: 22px;
    }
    .view img{
        width: 100%;
        height: 60%;
    }
</style>